<template>
  <div class='middle-title-box flex flex-space-between'>
    <div class='middle-title-item flex-acenter flex-column both-100' v-for="(item,index) in middleTitle" :key="index + item.title">
      <div class='middle-title-item-title marginb-15'>
        <span class="block"></span>
        <span class="title">
          {{ item.title }}
        </span>
      </div>
      <div class='middle-title-item-content' @click="animationNumber(item.content)">
        <NumberCard v-model="item.content" :time="1" unit="个" type="large"></NumberCard>
        <!-- <span class="count">{{ item.content }}</span> -->
        <!-- <span class="unit">个</span> -->
      </div>
    </div>
  </div>
</template>

<script>
import NumberCard from '@/components/Dashboard/Number';
import { getDeviceStatusCount } from '../api'
export default {
  data () {
    return {
      middleTitle: [],
      middleTitleList: {
        offlineNum: '安全设备离线',
        onlineNum: '安全设备在线',
        totalNum: '安全设备总数'
      }
    };
  },
  computed: {

  },
  watch: {},
  methods: {
    animationNumber(){},
    // 获取数据
    async getData (deptId) {
      try {
        const params = {
          deptId
        }
        const response = await getDeviceStatusCount(params)
        if (response.code === 200) {
          this.middleTitle = []
          for (const key in response.data) {
            this.middleTitle.push({
              title: this.middleTitleList[key],
              content: response.data[key]
            })
          }
          this.$forceUpdate();
        }
      } catch (error) {

      }
    }
  },
  created () {

  },
  mounted () {

  },
  components: {
    NumberCard
  },
}
</script>

<style lang='less' scoped>
.middle-title-box {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.middle-title-item {
  width: 33%;
  height: 66px;
  .middle-title-item-title {
    display: flex;
    align-items: center;
    height: 16px;
    .block {
      display: inline-block;
      width: 16px;
      height: 100%;
      border: 1px solid #fff;
      box-sizing: border-box;
      margin-right: 8px;
      position: relative;
      &::before {
        width: 5px;
        height: 5px;
        position: absolute;
        content: "";
        top: 50%;
        left: 50%;
        // transition: (50%,50%);
        transform: translate(-50%, -50%);
        background-color: #66e1df;
      }
    }
    .title {
      display: inline-block;
      line-height: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #d9e7ff;
    }
  }
  .middle-title-item-content {
    display: flex;
    flex: 1;
    width: 100%;
    justify-content: center;
    background: url("@/assets/images/dashboard/box4.png") no-repeat;
    background-position: center;
  }
}
</style>